import React from 'react'
import './Header.scss'
import { connect } from 'react-redux'
import { TABKEY } from '../config'
import { changeTab, getFilterData, changeFilter } from '../actions/headerAction'
import { contentList } from '../actions/contentListAction'
class Header extends React.Component {
  constructor(props) {
    super(props)
    this.feachData()
  }
  feachData() {
    this.props.dispatch(getFilterData())
  }
  changeTab(key) {
    let closePanel = false
    if (this.props.activeKey === key && !this.props.closePanel) {
      closePanel = true
    }
    this.props.dispatch(
      changeTab({
        activeKey: key,
        closePanel: closePanel
      })
    )
  }
  // 修改其他item状态
  revertActive(key, dataList) {
    if (key === TABKEY.cate) {
      for (let i = 0; i < dataList.length; i++) {
        for (let j = 0; j < dataList[i].sub_category_list.length; j++) {
          dataList[i].sub_category_list[j].active = false
        }
      }
    } else if (key === TABKEY.type) {
      for (let x = 0; x < dataList.length; x++) {
        dataList[x].active = false
      }
    } else {
      for (let k = 0; k < dataList.length; k++) {
        for (let o = 0; o < dataList[k].items.length; o++) {
          dataList[k].items[o].active = false
        }
      }
    }
  }
  changeDoFilter(ele, key, cateList) {
    this.revertActive(key, cateList)
    ele.active = true
    this.props.dispatch(
      changeFilter({
        ele,
        key
      })
    )

    this.props.dispatch(
      contentList({
        filterData: ele,
        toFirstPage: true
      })
    )
  }
  // 加载全部分类
  renderCateContent() {
    let cateList = this.props.filterData.category_filter_list || []
    return cateList.map((item, index) => {
      return (
        <li key={index} className="cate-item">
          <p className="item-title">
            {item.name}
            <span className="item-count">{item.quantity}</span>
          </p>
          <div className="item-content clearfix">
            {this.renderCateInnerContent(item, cateList)}
          </div>
        </li>
      )
    })
  }
  // 加载全部分类的内容
  renderCateInnerContent(item, cateList) {
    let cateBoxList = item.sub_category_list
    return cateBoxList.map((ele, index) => {
      let cls = ele.active ? 'cate-box-inner active' : 'cate-box-inner'
      return (
        <div
          key={index}
          className="cate-box"
          onClick={() => {
            this.changeDoFilter(ele, TABKEY.cate, cateList)
          }}
        >
          <div className={cls}>
            {ele.name}({item.quantity})
          </div>
        </div>
      )
    })
  }
  // 加载综合排序
  renderTypeContent() {
    let typeList = this.props.filterData.sort_type_list || []
    return typeList.map((ele, index) => {
      let cls = ele.active ? 'type-box active' : 'type-box'
      return (
        <div
          key={index}
          className={cls}
          onClick={() => {
            this.changeDoFilter(ele, TABKEY.type, typeList)
          }}
        >
          {ele.name}
        </div>
      )
    })
  }
  renderFilterContent() {
    let filterList = this.props.filterData.activity_filter_list || []
    return filterList.map((ele, index) => {
      return (
        <li className="filter-item-content" key={index}>
          <p className="filter-name">{ele.group_title}</p>
          <div className="filter-box-content clearfix">
            {this.renderFilterInnerContent(ele, filterList)}
          </div>
        </li>
      )
    })
  }
  renderFilterInnerContent(ele, filterList) {
    return ele.items.map((item, index) => {
      let cls = item.active ? 'filter-box-inner active' : 'filter-box-inner'
      if (item.icon) {
        cls += ' has-icon'
      }
      return (
        <div
          className="filter-box"
          key={index}
          onClick={() => {
            this.changeDoFilter(item, TABKEY.filter, filterList)
          }}
        >
          <div className={cls}>
            {item.icon ? <img src={item.icon} /> : null}
            {item.name}
          </div>
        </div>
      )
    })
  }
  renderTabs() {
    let tabs = this.props.tabs
    let arr = []
    for (let keys in tabs) {
      let item = tabs[keys]
      let cls = item.key + ' item'
      if (item.key === this.props.activeKey && !this.props.closePanel) {
        cls = cls + ' current'
      }
      arr.push(
        <div
          className={cls}
          key={item.key}
          onClick={() => {
            this.changeTab(item.key)
          }}
        >
          {item.text}
        </div>
      )
    }
    return arr
  }
  renderContent() {
    let tabs = this.props.tabs
    let array = []
    for (let key in tabs) {
      let item = tabs[key]
      let cls = item.key + '-panel'
      if (item.key === this.props.activeKey) {
        cls += ' current'
      }
      if (item.key === TABKEY.cate) {
        array.push(
          <ul key={item.key} className={cls}>
            {this.renderCateContent()}
          </ul>
        )
      } else if (item.key === TABKEY.type) {
        array.push(
          <ul key={item.key} className={cls}>
            {this.renderTypeContent()}
          </ul>
        )
      } else {
        array.push(
          <ul key={item.key} className={cls}>
            {this.renderFilterContent()}
          </ul>
        )
      }
    }
    return array
  }
  render() {
    let cls = 'panel'
    if (!this.props.closePanel) {
      cls += ' show'
    } else {
      cls = 'panel'
    }
    return (
      <div className="category_header">
        <div className="header-top">{this.renderTabs()}</div>
        <div className={cls}>
          <div className="panel-inner">{this.renderContent()}</div>
        </div>
      </div>
    )
  }
}
export default connect(state => ({
  tabs: state.headerReducer.tabs,
  activeKey: state.headerReducer.activeKey,
  filterData: state.headerReducer.filterData,
  closePanel: state.headerReducer.closePanel
}))(Header)
